<!--
 * @Date: 2020-02-15 21:08:27
 * @LastEditors: 黄栋
 * @LastEditTime: 2020-04-27 11:14:21
 * @FilePath: /cloudAdmin/src/views/market/productManagement/index.vue
 -->
<template>
  <div id="page1">
    <el-tabs class="pageTab" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="产品列表" name="first">
        <ProductList ref="productList" @editShop="editShop" />
      </el-tab-pane>
      <el-tab-pane label="产品发布" name="second">
        <ProductPublish ref="publishRef" @freshTable="freshTable" />
      </el-tab-pane>
      <el-tab-pane label="产品评价" name="third">
        <ProductEvaluate />
      </el-tab-pane>
      <el-tab-pane label="店铺产品分类" name="forth">
        <ProductCategory />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ProductList from "./ProductList";
import ProductPublish from "./ProductPublish";
import ProductEvaluate from "./ProductEvaluate";
import ProductCategory from "./ProductCategory";

export default {
  components: { ProductList, ProductPublish, ProductEvaluate, ProductCategory },
  data() {
    return {
      activeName: "first" //第一个默认启动
    };
  },
  activated() {
    //从首页过来初始化
    if (this.$route.query && this.$route.query.type) {
      this.activeName = this.$route.query.type;
      if (this.activeName == "second") {
        this.$refs.publishRef.initProduct();
      }
    }
  },
  methods: {
    //二级tab切片
    handleClick(tab, event) {
      // console.log(tab, event);
      if (tab.index == 1) {
        this.$refs.publishRef.initProduct();
      }
    },
    freshTable() {
      this.$refs.productList.getDataList();
    },
    editShop(id) {
      this.activeName = "second";
      this.$refs.publishRef.initProduct(id);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" >
</style>